import { computed } from "vue";
import { useRoute } from "vue-router";
import type { RouteLocationMatched } from "vue-router";

export function useBreadcrumbs() {
  const route = useRoute();

  const breadcrumbs = computed(() => {
    return route.matched
      .filter((item: RouteLocationMatched) => {
        const { meta, name } = item;
        // 检查路由是否需要隐藏面包屑
        if (meta?.hideBreadcrumb || !name) {
          return false;
        }
        return true;
      })
      .map((item) => {
        return {
          title: item.meta?.title || "",
          path: item.path,
        };
      });
  });

  // 判断当前页面是否需要显示面包屑组件
  const showBreadcrumb = computed(() => {
    return !route.meta?.hideBreadcrumbComponent;
  });

  return {
    breadcrumbs,
    showBreadcrumb,
  };
}
